<include file="Public:header_user"/>
<link href="__PUBLIC__/Js/uploadify.v3.2.1/uploadify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="__PUBLIC__/Js/uploadify.v3.2.1/jquery.uploadify.js"></script>
<link href="__PUBLIC__/Js/jquery-plugin/imgareaselect/css/imgareaselect-default.css" type="text/css" rel="stylesheet" />

<script type="text/javascript" src="__PUBLIC__/Js/jquery-plugin/imgareaselect/scripts/jquery.imgareaselect.pack.js"></script>

<style type="text/css">
.upload-box{ margin-top: 30px; }
.upload_head_cont{ background: #FFF; padding: 10px; overflow: hidden; }
.upload_head{ width: 530px; text-align: center; margin: auto;}
#preview-pane { float: left; margin-left: 30px; }

#preview-pane .preview-container { width: 200px; overflow: hidden; text-align: left; }

.img-opt,.img-data{ overflow: hidden; }
.upload-opt{ overflow: hidden; margin-top: 5px; text-align: center; }
.upload-opt .btn{ width: 40%;}

.swfupload{ left: 0px; }
#file_upload{ height: 40px; margin: auto; }
#upload_queue_list{ display: none; }

.upload-pic{ overflow: hidden; }
.upload-pic-select{ float: left; width:300px; }
.select-img{ width: 300px; background: #e5e5e5; overflow: hidden; }
.upload-pic-select img{ width: 300px; }
.upload-img{ display: none; }
.upload-file-btn{ height: 30px; width: 300px; padding: 135px 0px; text-align: center; overflow: hidden; }

.uploadify-button{ background-image:none; background-color: #535353; border-radius:5px; border:0px; font-weight: normal; }
.crop-preview-big{width: 190px; height: 190px; overflow: hidden;border: 1px solid #e5e5e5;background: #e5e5e5;}
.crop-preview-small{width: 100px; height: 100px; overflow: hidden; border: 1px solid #e5e5e5;background: #e5e5e5;margin-top: 10px; }
.crop-preview-big img{ }
.crop-preview-small img{  }
#preview-pane img{width: 100%;}
.upload-tip{ text-align: left; margin-bottom: 10px; line-height: 22px; }
.upload-tip b{ font-size: 14px; }
.upload-example{ float: left; width: 280px; margin-left: 10px; }
.upload-example li{ float: left; width: 50%; text-align: center; margin-bottom: 10px; }
.upload-example li span{ width: 100%; line-height: 22px; display: block; }
.upload-example .title{ margin-bottom: 10px; line-height: 20px; vertical-align: middle; }
.icon-success{ color: #00beb7; font-size: 20px; vertical-align: middle; }
.icon-error:before{ color: #ff7100; font-size: 20px; vertical-align: middle; }
</style>
<div class="title_member">
	<h2>{$_title}</h2>
</div>

<div class="form-box">
	<div class="upload-box">
		<div class="upload_head">
			<div class="upload-pic">
				<div class="upload-pic-select">
					<div class="select-img">
						<div class="upload-file-btn">
							<input type="file" id="file_upload">
						</div>
						<img src="{$head_url}" class="upload-img">
					</div>
					<div class="upload-opt">
						<form action="" class="upload-head-form" method="post">
							<input type="hidden" value="{$file_id}" name="file_id" class="file_id">
							<input type="hidden" value="" name="x1" class="crop-x1">
							<input type="hidden" value="" name="y1" class="crop-y1">
							<input type="hidden" value="" name="x2" class="crop-x2">
							<input type="hidden" value="" name="y2" class="crop-y2">
							<input type="hidden" value="" name="width" class="img-width">
							<input type="hidden" value="" name="height" class="img-height">
							<span class="btn save-head">保存</span>
							<span class="btn reupload-head btn-cancel" style="display:none">重新上传</span>
						</form>
					</div>
				</div>
				<div id="preview-pane">
					<div class="preview-container">
						<div class="crop-preview-big">
							<img src="{:img($user_head_url, 200, 200)}">
						</div>
						<div class="crop-preview-small">
							<img src="{:img($user_head_url, 200, 200)}">
						</div>
					</div>
				</div>
			</div>
			<div id="upload_queue_list"></div>
		</div>
	</div>
</div>

<div class="order_btm_tips">
	1、支持jpg、gif、png格式；<br>
	2、单张照片在10k-2M之间；
</div>

<script type="text/javascript">
var imgAreaSelectApi;
function crop_img () {
	imgAreaSelectApi = $('.upload-img').imgAreaSelect({
		persistent : true,  // true，选区以外点击不会启用一个新选区（只能移动/调整现有选区）
		instance : true,    // true，返回一个imgAreaSelect绑定到的图像的实例，可以使用api方法 
		aspectRatio: '1:1',
		minWidth : 190,   // 选取的最小宽度
		minHeight : 190,  // 选取的最小高度  
		handles: true,
		fadeSpeed: 200,
		hide:false,
		x1: 0,
		y1: 0,
		x2: 190,
		y2: 190,
		onSelectChange:preview
	});
	return imgAreaSelectApi;
}
function preview(img, selection) {
	if (!selection.width || !selection.height){
		return;
	}

	var scaleX = 190 / selection.width;
	var scaleY = 190 / selection.height;

	$('.crop-preview-big img').css({
		width: Math.round(scaleX * $('.upload-img').width()),
		height: Math.round(scaleY *  $('.upload-img').height()),
		marginLeft: -Math.round(scaleX * selection.x1),
		marginTop: -Math.round(scaleY * selection.y1)
	});

	scaleX = 100 / selection.width;
	scaleY = 100 / selection.height;

	$('.crop-preview-small img').css({
		width: Math.round(scaleX * $('.upload-img').width()),
		height: Math.round(scaleY *  $('.upload-img').height()),
		marginLeft: -Math.round(scaleX * selection.x1),
		marginTop: -Math.round(scaleY * selection.y1)
	});

	$('.crop-x1').val(selection.x1);
	$('.crop-y1').val(selection.y1);
	$('.crop-x2').val(selection.x2);
	$('.crop-y2').val(selection.y2);
	$('.img-width').val($('.upload-img').width());
	$('.img-height').val($('.upload-img').height());
}
$(document).ready(function () {

	$('.reupload-head').click(function () {
		// $('.upload-img').hide();
		// $('.reupload-head').hide();
		// $('.upload-file-btn').show();
		// $('.imgareaselect-outer').remove();
		// // imgAreaSelectApi.remove(true);
		// imgAreaSelectApi.setOptions({hide:true});
		jumpurl('__SELF__');
	});

	$('.save-head').click(function () {
		var url  = $('.upload-head-form').attr('action');
		var data = $('.upload-head-form').serialize();
		loading('正在保存，请稍候...');
		$.ajax({
			type: "post",
			url: url,
			data : data,
			success : function(data){
				removeLoading();
				if(data.status == 1){
					msgbox(data.info);
					if(data.data.url){
						jumpurl(data.data.url);
					}
				}else{
					msgbox(data.info, 'error');
				}
			},
			error :function (data) {
				removeLoading();
				msgbox('请求失败，请稍候再试！', 'error');
			}
		});
	});
	$('#file_upload').uploadify({
		'formData' : { '<?php echo session_name();?>' : '<?php echo session_id();?>' ,'filepath':'head'},
        'auto':true,//是否自动上传
        'buttonText':'从电脑上选择照片',
        'uploader':'{:U("File/upload")}',//上传处理程序
        'multi' : false,//允许同时上传多张图片
        'swf': "__PUBLIC__/Js/uploadify.v3.2.1/uploadify.swf",
        'overrideEvents' : ['onDialogClose','onUploadSuccess','onUploadError','onSelectError'],
        'onSelectError': function (file, errorCode, errorMsg) {
        	var msgText = "上传失败==>";  
	        switch (errorCode) {  
	            case SWFUpload.QUEUE_ERROR.QUEUE_LIMIT_EXCEEDED:  
	                msgText += "每次最多上传 " + this.settings.queueSizeLimit + "个文件";  
	                break;  
	            case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT:  
	                msgText += "文件大小超过限制( " + this.settings.fileSizeLimit + " )";  
	                break;  
	            case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE:  
	                msgText += "文件大小为0";  
	                break;  
	            case SWFUpload.QUEUE_ERROR.INVALID_FILETYPE:  
	                msgText += "文件格式不正确，仅限 " + this.settings.fileTypeExts;  
	                break;  
	            default:  
	                msgText += "错误代码：" + errorCode + "\n" + errorMsg;  
	        }  
	        msgbox(msgText,'error');
        },
        'fileTypeDesc':'支持的格式：',
	    'fileTypeExts':'*.jpg;*.jpeg;*.gif;*.png',//允许上传的文件后缀
        'fileSizeLimit':'2MB',//上传文件的大小限制
        'queueSizeLimit' : 1,//上传数量
        'queueID':'upload_queue_list',
        //上传到服务器，服务器返回相应信息到data里
        'onUploadSuccess':function(file, data, response){
            if(data){
				if(data=='err'){
					alert('上传文件失败！');
				}else{
					json     = jQuery.parseJSON(data);
					filename = json.filename;
					file_url = json.file_url;
					file_id  = json.file_id;
					$('.upload-img').attr('src', file_url);
					$('.crop-preview-big img').attr('src', file_url);
					$('.crop-preview-small img').attr('src', file_url);
					$('.file_id').val(file_id);

					$('.upload-img').show();
					$('.reupload-head').show();
					$('.upload-file-btn').hide();

					$('.crop-x1').val(0);
					$('.crop-y1').val(0);
					$('.crop-x2').val(190);
					$('.crop-y2').val(190);
					$('.img-width').val($('.upload-img').width());
					$('.img-height').val($('.upload-img').height());

					imgAreaSelectApi = crop_img();
				}
			}else{
				alert("不能非法上传文件！");
			}
        }
	});
});

</script>
<include file="Public:footer_user"/>